<!--
 * @Description: 记录详情
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-09-29 14:37:52
 * @LastEditTime: 2021-09-29 17:36:28
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <table class="operations-info" style="max-width: 1500px;">
    <template v-if="row.logType === 'normal'">
      <tr>
        <td>状态码</td>
        <td>{{ row.code }}</td>
      </tr>
      <tr>
        <td>请求URL</td>
        <td>{{ row.requestUrl }}</td>
      </tr>
      <tr>
        <td>请求方式</td>
        <td>{{ row.method === 'get' ? '-' : row.method.toUpperCase() }}</td>
      </tr>
      <tr>
        <td>请求参数</td>
        <td>{{ row.requestBody ? JSON.parse(row.requestBody) : '-' }}</td>
      </tr>
      <tr>
        <td>状态</td>
        <td>{{ row.response }}</td>
      </tr>
      <tr>
        <td>请求结果</td>
        <td>{{ row.messages }}</td>
      </tr>
    </template>
    <template v-if="row.errorType === 'xhr' && row.level === 'info'">
      <tr>
        <td>状态码</td>
        <td>{{ row.code }}</td>
      </tr>
      <tr>
        <td>请求URL</td>
        <td>{{ row.requestUrl }}</td>
      </tr>
      <tr>
        <td>请求方式</td>
        <td>{{ row.method.toUpperCase() }}</td>
      </tr>
      <tr>
        <td>请求参数</td>
        <td>{{ row.method === 'get' ? '-' : JSON.parse(row.requestBody) }}</td>
      </tr>
      <tr>
        <td>状态</td>
        <td>{{ row.response }}</td>
      </tr>
      <tr>
        <td>请求结果</td>
        <td>{{ row.messages }}</td>
      </tr>
    </template>
    <template v-if="row.errorType === 'xhr' && row.level !== 'info'">
      <tr>
        <td>状态码</td>
        <td>{{ row.code }}</td>
      </tr>
      <tr>
        <td>请求URL</td>
        <td>{{ row.requestUrl }}</td>
      </tr>
      <tr>
        <td>请求方式</td>
        <td>{{ row.method.toUpperCase() }}</td>
      </tr>
      <tr>
        <td>请求参数</td>
        <td>{{ row.method === 'get' ? '-' : JSON.parse(row.requestBody) }}</td>
      </tr>
      <tr>
        <td>状态</td>
        <td>{{ row.response }}</td>
      </tr>
      <tr>
        <td>请求结果</td>
        <td>{{ row.messages }}</td>
      </tr>
    </template>
    <template v-if="row.errorType === 'resources'">
      <tr>
        <td>异常信息</td>
        <td>{{ row.error }}</td>
      </tr>
      <tr>
        <td>返回结果</td>
        <td>{{ row.messages }}</td>
      </tr>
    </template>
    <template v-if="row.errorType === 'javascript'">
      <tr>
        <td>请求URL</td>
        <td>{{ row.requestUrl }}</td>
      </tr>
      <tr>
        <td>异常信息</td>
        <td>{{ row.error }}</td>
      </tr>
      <tr>
        <td>错误行号</td>
        <td>{{ row.lineNo }}</td>
      </tr>
      <tr>
        <td>错误列数</td>
        <td>{{ row.columnNo }}</td>
      </tr>
      <tr>
        <td>返回结果</td>
        <td>{{ row.messages }}</td>
      </tr>
    </template>
    <template v-if="row.errorType === 'vue'">
      <tr>
        <td>异常信息</td>
        <td>{{ row.error }}</td>
      </tr>
      <tr>
        <td>返回结果</td>
        <td>{{ JSON.parse(row.messages).message }}</td>
      </tr>
    </template>
    <tr>
      <td>网络速率</td>
      <td>{{ row.spendTime === 0 ? '-' : row.spendTime + ' KB/s'}}</td>
    </tr>
    <tr>
      <td>DNS解析时间</td>
      <td>{{ row.performance.dnst ? row.performance.dnst + ' Ms' : '-' }}</td>
    </tr>
    <tr>
      <td>TCP建立时间</td>
      <td>{{ row.performance.tcpt ? row.performance.tcpt + ' Ms' : '-' }}</td>
    </tr>
    <tr>
      <td>白屏时间</td>
      <td>{{ row.performance.wit ? row.performance.wit + ' Ms' : '-' }}</td>
    </tr>
    <tr>
      <td>Dom渲染完成时间</td>
      <td>{{ row.performance.domt ? row.performance.domt + ' Ms' : '-' }}</td>
    </tr>
    <tr>
      <td>Onload时间</td>
      <td>{{ row.performance.lodt ? row.performance.lodt + ' Ms' : '-' }}</td>
    </tr>
    <tr>
      <td>准备时间</td>
      <td>{{ row.performance.radt ? row.performance.radt + ' Ms' : '-' }}</td>
    </tr>
    <tr>
      <td>重定向时间</td>
      <td>{{ row.performance.rdit ? row.performance.rdit + ' Ms' : '-' }}</td>
    </tr>
    <tr>
      <td>Unload时间</td>
      <td>{{ row.performance.uodt ? row.performance.uodt + ' Ms' : '-' }}</td>
    </tr>
    <tr>
      <td>Request请求耗时</td>
      <td>{{ row.performance.reqt ? row.performance.reqt + ' Ms' : '-' }}</td>
    </tr>
    <tr>
      <td>解析Dom耗时</td>
      <td>{{ row.performance.andt ? row.performance.andt + ' Ms' : '-' }}</td>
    </tr>
    <tr>
      <td>版本信息</td>
      <td>{{ row.userAgent }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  name: 'info',
  props: ['row'],
  filters: {
    // 过滤类型
    filterMode (val) {
      switch (val) {
        case 0:
          val = '点击连接或表单提交方式';
          break;
        case 1:
          val = '刷新或重新载入方式';
          break;
        case 2:
          val = '历史记录或前进后退方式';
          break;
        default:
          val = '其他方式';
      }
      return val;
    },
  }
};
</script>

<style lang="scss" scoped>
.operations-info {
  width: 100%;
  border-left: 1px solid #ebeef5;
  tr {
    td {
      padding: 5px 15px;
      line-height: 30px;
      &:first-child {
        min-width: 150px;
        text-align: center;
        background: #f8f8f9;
      }
      &:last-child {
        display: inline-block;
        width: calc(100% - 151px);
        max-width: calc(1500px - 151px);
        overflow: hidden;
      }
    }
  }
  tr:first-child {
    td {
      border-top: 1px solid #ebeef5;
    }
  }
}
</style>